<template>
	<div class="wrapper" style="padding-top: 10px;">
		<view>
		<!-- 公共组件-每个页面必须引入 -->
		<view class="nav_list" v-for="(item, index) in tabList" :key="item.id" :class="{ active: item.id === currentId }"
			@click="modelNavigateTo(item)">
			{{ item.name }}
		</view>
		<!-- <view class="nav_list" @click="modelNavigateTo(tabList[0])">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>{{ tabList[0].name }}</text>
		</view> -->
		<z-navigation></z-navigation>
	</view>
	</div>
	
</template>

<script>
import { modelNavigateTo } from "./tpl";
export default {
	data() {
		return {
			tabList: [],
			currentId: 0,
			modelNavigateTo,
		};
	},
	created() {
		let data = uni.getStorageSync("common2Menu");
		this.tabList = JSON.parse(decodeURIComponent(data))
		uni.removeStorageSync("common2Menu");
		for (var i = 0; i < this.tabList.length; i++) {
			this.tabList[i].type = "category";
		}
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	//第一次加载
	onLoad(e) {
		this.tabList = JSON.parse(decodeURIComponent(e.data))
		for (var i = 0; i < this.tabList.length; i++) {
			this.tabList[i].type = "category";
		}
		console.log(this.tabList)
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	//页面显示
	onShow() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onTokenJump(url) {
			this.judgeLogin(() => {
				// 这里写登录后的代码，未登录不会到这里来，会自动提示去登录
				uni.navigateTo({
					url: url
				});
			});
		}
	},
	//页面隐藏
	onHide() { },
	//页面卸载
	onUnload() { },
	//页面下来刷新
	onPullDownRefresh() { },
	//页面上拉触底
	onReachBottom() { },
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';

.nav_list {
	background-color: #fff;
	// padding: 30upx;
	padding-bottom: 10px;
	padding-left: 25px;
	display: flex;
	align-items: center;
	position: relative;
	font-size: 20upx;
	// margin-bottom: 10upx;

	&:active {
		background-color: #f5f5f5;
	}

	image {
		width: 40upx;
		height: 40upx;
	}

	text {
		font-size: 28upx;
		color: #333;
		margin-left: 30upx;
	}

	// &::after {
	// 	content: '';
	// 	position: absolute;
	// 	left: 300upx;
	// 	top: 50%;
	// 	transform: translateY(-50%);
	// 	width: 40upx;
	// 	height: 40upx;
	// 	background-image: url('');
	// 	background-position: center center;
	// 	background-repeat: no-repeat;
	// 	background-size: cover;
	// }
}</style>
